<template>
    <div class="files flex font">
        <AsideVue></AsideVue>
        <div class="box">
            <NavVue></NavVue>
            <div class="flex brs bs ml-10 pt-10 pr-10 mr-10 bg-fff">
                <div class="sidebar">
                    <el-menu unique-opened="true" class="el-menu-vertical-demo" @select="selectMenu" @open="open" @close="close" >
                        <!-- 经理 -->
                        <el-sub-menu v-if="type == 'boss'" v-for="item in fileList" :key="item.user_department_id"
                            :index="item.user_department_id + '.1'" >

                            <template #title>
                                <span>{{ item.user_department_name }}</span>
                            </template>
                            <el-sub-menu v-for="userName in item.userGroup" :index="userName.user_group_id + '.2'"
                                class="group">
                                <template #title>
                                    <span>{{ userName.UserGroupName }}</span>
                                </template>
                                <el-menu-item v-for="name in userName.user" :key="name" :index="name.id + '.r'">{{
                                    name.name
                                }}
                                </el-menu-item>
                            </el-sub-menu>
                        </el-sub-menu>
                        <!-- 部门 -->
                        <el-sub-menu v-else-if="type == 'manager'" v-for="item in fileList"
                            :index="item.user_group_id + '.2'" class="group">
                            <template #title>
                                <span>{{ item.UserGroupName }}</span>
                            </template>
                            <el-menu-item v-for="name in item.user" :index="name.id + '.r'">{{ name.name }}</el-menu-item>
                        </el-sub-menu>
                        <!-- 个人 -->
                        <el-sub-menu v-else-if="type == 'user'"  >
                            <template #title>
                                <span>我的文件</span>
                            </template>
                            <el-menu-item :index="user.id + '.r'">{{ user.name }}</el-menu-item>
                        </el-sub-menu>

                    </el-menu>
                </div>
                <fileDetails ref="details" :detalisList="detalisList" :userId="userId" @root="root" @userList="userList"></fileDetails>
            </div>
        </div>
    </div>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import * as $axios from '../../api/index'
import AsideVue from '../components/Aside.vue';
import NavVue from '../components/Nav.vue';
import fileDetails from './components/fileDetails.vue';
import { useDemoStore } from '../../pinia/index'
const store = useDemoStore()

// 获取文件菜单列表
const fileList = ref([])
const type = ref('')
const user = ref('')
const getFile = () => {
    const data = {
        token: store.token
    }
    $axios.$fileUser_department(data).then(res => {
        type.value = res.data.department_type
        if (res.data.department_type == "user") { //个人
            user.value = res.data
        } else if (res.data.department_type == "manager") {  //部门
            fileList.value = res.data.userGroup
        } else if (res.data.department_type == "boss") {  //经理
            fileList.value = res.data.list
        }
        // console.log(res.data)
    })
}

onMounted(getFile)

// 菜单展开回调
const detalisList = ref([])
const nameId = ref('')
const open = (value) => {
    // console.log(details.value)
    details.value.clear()
    nameId.value = value ||nameId.value 
    userId.value = ''
    // console.log(value)
    if (nameId.value && nameId.value.includes('.1')) {  //一级菜单
        const data = {
            token: store.token,
            user_department_id: nameId.value.split('.')[0]
        }
        $axios.$fileUser_department_file(data).then(res => {
            size(res.data.userGroup)
            detalisList.value = res.data.userGroup
            console.log(res.data.userGroup)
        })
    } else if (nameId.value && nameId.value.includes('.2')) {  //二级菜单
        const data = {
            token: store.token,
            user_group_id: nameId.value.split('.')[0]
        }
        $axios.$fileUser_group_file(data).then(res => {
            size(res.data.user)
            detalisList.value = res.data.user
            // console.log(res.data)
        })
    }

}

// 菜单收起的回调
// const storeId = ref()
// const close = (value)=>{
//     if (value && value.includes('.1')) {  //一级菜单
//         detalisList.value = []
//     } else if (value && value.includes('.2')) {  //二级菜单
//         const data = {
//             token: store.token,
//             user_department_id:storeId.value
//         }
//         $axios.$fileUser_department_file(data).then(res => {
//             // size(res.data.userGroup)
//             detalisList.value = res.data && res.data.userGroup
//             // console.log(res.data.userGroup)
//         })
//     }
//     arrId.value = []
// }

// 子组件触发
const root = ()=>{
    open()
}

// 父组件触发子组件事件
const details = ref()

// 菜单激活回调
const userId = ref('')
const selectMenu = (value) => {
    // console.log(value)
    const data = {
        token: store.token,
        user_open_id: value.split('.')[0]
    }
    $axios.$fileUser_user_file(data).then(res => {
        size(res.data)
        detalisList.value = res.data
        userId.value = res.data[0].user_id
        // console.log(userId.value)
    })
}

// 子组件调用
const userList = (value) => {
    size(value)
    detalisList.value = value
    // console.log(value)
}

// 格式化日期文件
const size = (value) => {
    value.forEach(item => {
        item.size = item.size ? (item.size / 1024 / 1000).toFixed(2) + 'M' : '暂无数据'
        item.upload_time = item.upload_time || '无'
    })
}


</script>

<style lang="less" scoped>
@import './files.less';

.group {
    max-height: 50vh;
    overflow: hidden;
    overflow-y: auto;
}

// 滚动条美化
.group::-webkit-scrollbar {
    width: 5px;
}

.group::-webkit-scrollbar-thumb {
    background-color: rgb(212, 212, 212);
    border-radius: 5px;
}
</style>